<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="业主评价"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div class="evaluate">
      <div @click="show = true">
        <div>服务完成</div>
        <div>{{ isfinish }}</div>
      </div>
      <div style="font-weight: bold">服务评价(分)</div>
      <div>
        <div>服务效率</div>
        <div><van-stepper v-model="value1" min="1" max="10" integer /></div>
      </div>
      <div>
        <div>服务态度</div>
        <div><van-stepper v-model="value2" min="1" max="10" integer /></div>
      </div>
      <div>
        <div>服务准时</div>
        <div><van-stepper v-model="value3" min="1" max="10" integer /></div>
      </div>
      <div>
        <div>专业素养</div>
        <div><van-stepper v-model="value4" min="1" max="10" integer /></div>
      </div>
      <div>
        <div>服务形象</div>
        <div><van-stepper v-model="value5" min="1" max="10" integer /></div>
      </div>
    </div>
    <div class="btn">
      <button @click="complete">提交评价</button>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-picker
        title="服务完成"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { orderEvaluate } from "../../apis/user";

export default {
  data() {
    return {
      columns: ["是", "否"],
      show: false,
      value1: "9",
      value2: "9",
      value3: "9",
      value4: "9",
      value5: "9",
      isfinish: "是",
      trustId: "",
    };
  },
  created() {
    this.trustId = this.$route.query.trustId;
  },
  watch: {
    isfinish(newValue, oldValue) {
      if (newValue == "否") {
        this.$router.push("/complaint");
      }
    },
  },
  methods: {
    complete() {
      this.$dialog
        .confirm({
          title: "温馨提示",
          className: "leftpart",
          confirmButtonText: "是",
          confirmButtonColor: "#45b7cb",
          cancelButtonText: "否",
          message: "再次确认服务是否完成",
          messageAlign: "left",
        })
        .then(() => {
          orderEvaluate({
            trustId: this.$route.query.trustId,
            serviceEfficiency: this.value1,
            serviceAttitude: this.value2,
            servicesOnTime: this.value3,
            specialtyLiteracy: this.value4,
            serviceImage: this.value5,
          }).then((res) => {
            console.log("提交评价", res);
            if (res.code == 200 || res.code == 201) {
              this.$dialog
                .alert({
                  title: "温馨提示",
                  message: "提交评价成功，即将跳转到个人中心",
                  confirmButtonColor: "#45b7cb",
                  theme: "round-button",
                  messageAlign: "left",
                })
                .then(() => {
                  this.$router.push("/home/me");
                });
            }
          });
        })
        .catch(() => {
          this.$router.push("/complaint");
        });
    },
    onCancel() {
      this.show = false;
    },
    onConfirm(value) {
      this.show = false;
      this.isfinish = value;
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  text-align: center;
  margin-top: 40px;
  button {
    width: 92vw;
    height: 12vw;
    border-radius: 22.5px;
    background-image: linear-gradient(to right, #93d7e6, #45b7cb);
    border: 0;
    color: #fff;
  }
  button:active {
    color: #666;
    background-image: linear-gradient(to right, #93d7e679, #45b7cb75);
  }
}
.evaluate {
  margin: 20px 15px;
  & > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
  }
  & > div > div:nth-child(1) {
    font-weight: bold;
  }
}
</style>